<template>
  <div>
    <div class="search_form">
			<div>
        <el-date-picker
          v-model="searchForm.workDate"
          type="date"
          size="mini"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
				<el-select
					size="mini"
					clearable
					placeholder="请选择班次"
					v-model="searchForm.workTime"
					class="others"
					popper-class="selectClass"
				>
					<el-option v-for="(item, index) in workTimeList" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
				</el-select>

				<el-button class="search_btn" type="primary" icon="el-icon-search" size="mini" @click="searchData">查询</el-button>
				<el-button icon="el-icon-refresh-right" size="mini" @click="resetSearch">重置</el-button>
			</div>
      <div>
        <el-button size="mini" type="primary" :disabled="startWork" @click="changetWorkStatus('开工')">开工</el-button>
        <el-button size="mini" type="primary" :disabled="stopWork" @click="changetWorkStatus('停工')">停工</el-button>
        <el-button size="mini" type="primary" :disabled="resumeWork" @click="changetWorkStatus('复工')">复工</el-button>
        <el-button size="mini" type="primary" :disabled="endWork" @click="changetWorkStatus('完工')">完工</el-button>
        <el-button size="mini" type="primary" @click="searchDetailData">详情</el-button>
      </div>
    </div>
    <!-- 主列表 -->
    <BaseTable 
      ref="table"
      :loading="loading"
      :data="tableData"
      :columns="columns" 
      :tableHeight="tableHeight" 
      @details="handlerClick" 
      :pagination="false" 
    ></BaseTable>
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick(activeName)">
        <el-tab-pane label="已派劳务" name="first">
          <!-- 主列表table -->
          <BaseTable 
            :data="labourTableData"
            :columns="labourColumns" 
            :tableHeight="tableHt" 
            :pagination="false" ></BaseTable>
        </el-tab-pane>
        <el-tab-pane label="已派机械" name="second">
          <!-- 主列表table -->
          <BaseTable 
            :data="machineTableData"
            :columns="machineColumns" 
            :tableHeight="tableHt" 
            :pagination="false" ></BaseTable>
        </el-tab-pane>
        <el-tab-pane label="已派熏蒸" name="third">
          <BaseTable 
            :data="fumigationTableData"
            :columns="fumigationColumns" 
            :tableHeight="tableHt" 
            :pagination="false" ></BaseTable>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%">
        <el-form ref="formValue" :model="form" label-width="80px">
          <el-form-item label="日期">
            <el-date-picker 
              style="width: 100%" 
              v-model="form.dynamicTime" 
              value-format="yyyy-MM-dd HH:mm" 
              format="yyyy-MM-dd HH:mm"
              type="datetime" 
              placeholder="选择时间" 
              size="mini"></el-date-picker>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="form.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="submitClick(title)" size="mini">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-drawer title="动态详情" :visible.sync="isShow" size="40%" :before-close="handleClose">
        <BaseTable 
          :loading="dloading"
          :data="detailTableData"
          :columns="detailColumns" 
          :tableHeight="tableHeight1" 
          :pagination="false" 
        ></BaseTable>
      </el-drawer>
    </div>
  </div>
</template>
<script>
import api from '@/api/Dispatch/dynamiCmonitor/index'
import publicapi from '@/api/public/index'
import BaseTable from '@/components/BaseTable'
export default{
  components: { BaseTable },
  data() {
    return{
      searchForm: {
        workDate: '',
        workTime: '01',
      },
      workTimeList: [], // 班次
      tableHeight: window.innerHeight - 400,
      tableHeight1: 250,
      tableHt: window.innerHeight - 530,
      loading: false,
      tableData: [],
      columns: [
        {
          prop: 'planNo',
          label: '序号',
        },
        {
          prop: 'processName',
          label: '作业过程',
        },
        {
          prop: 'status',
          label: '状态',
          render(h,params) {
            if (params.row.status == '1') {
              return h('el-tag', {
                props: {
                  size: 'mini'
                },
                domProps: {
                  innerHTML: '未开工'
                }
              })
            } else if (params.row.status == '2') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'success'
                },
                domProps: {
                  innerHTML: '作业中'
                }
              })
            } else if (params.row.status == '3') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'danger'
                },
                domProps: {
                  innerHTML: '停工'
                }
              })
            } else if (params.row.status == '4') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'warning'
                },
                domProps: {
                  innerHTML: '已完工'
                }
              })
            }
          }
        },
        {
          prop: 'nameVoyage',
          label: '船名航次',
        },
        {
          prop: 'cargoCategoryName',
          label: '货种',
        },
        {
          prop: 'customerName',
          label: '客户名称',
          isShort: true,
        },
        {
          prop: 'loadUnload',
          label: '装卸',
        },
        {
          prop: 'berthNo',
          label: '泊位',
        },
        {
          prop: 'storehouseName',
          label: '库场',
        },
        {
          prop: 'cooperationName',
          label: '协力队',
        },
        {
          prop: 'deptName',
          label: '作业工段',
        },
        {
          prop: 'tallyFront',
          label: '前沿',
        },
        {
          prop: 'transport',
          label: '转运',
        },
        {
          prop: 'tallyBack',
          label: '后场',
        },
        {
          prop: 'supporting',
          label: '辅助',
        },
        {
          prop: 'laborDispatch',
          label: '劳务队',
        },
        {
          prop: 'tallyClerk',
          label: '理货员',
        },
        {
          prop: 'instructorName',
          label: '指导员',
        },
        {
          prop: 'workloadPlan',
          label: '计划量',
        },
        {
          prop: 'planNo',
          label: '已作业量',
        },
      ],
      detailInfo: null, // 选中行信息
      activeName: 'first', // 选中的tab
      labourTableData: [], // 劳务
      labourColumns: [
        {
          prop: 'userNo',
          label: '工号'
        },
        {
          prop: 'operatorsName',
          label: '姓名'
        },
        {
          prop: 'deptName',
          label: '部门'
        },
        {
          prop: 'createName',
          label: '创建人',
        },
        {
          prop: 'createTime',
          label: '创建时间'
        },
      ],
      machineTableData: [], // 机械
      machineColumns: [
        {
          prop: 'equipmentTypeName',
          label: '机械类型',
        },
        {
          prop: 'equipmentNo',
          label: '机械编号',
        },
        {
          prop: 'position',
          label: '机械位置',
          render: (h,params) => {
            return h('span',{
              
            },params.row.position == '1' ? '前沿' : params.row.position == '2' ? '转运' : params.row.position == '3' ? '后场' : params.row.position == '4' ? '熏蒸库' : params.row.position == '5' ? '待检区' : '辅助'
            )
          }
        },
        {
          prop: 'operatorsName',
          label: '司机',
        },
        {
          prop: 'createName',
          label: '创建人',
        },
        {
          prop: 'createTime',
          label: '创建时间',
        },
      ],
      fumigationTableData: [], // 熏蒸
      fumigationColumns: [
        {
          prop: 'userNo',
          label: '工号'
        },
        {
          prop: 'operatorsName',
          label: '姓名'
        },
        {
          prop: 'deptName',
          label: '部门'
        },
        {
          prop: 'createName',
          label: '创建人',
        },
        {
          prop: 'createTime',
          label: '创建时间'
        },
      ],
      title: '', // 对话框标题
      dialogVisible: false, // 弹框
      form: {
        dynamicTime: '',
        remark: '',
      },
      isShow: false,
      dloading: false,
      detailTableData: [], //动态详情
      detailColumns: [
        {
          prop: 'planDynamic',
          label: '状态',
          render(h,params) {
            if (params.row.planDynamic == '1') {
              return h('el-tag', {
                props: {
                  size: 'mini'
                },
                domProps: {
                  innerHTML: '开工'
                }
              })
            } else if (params.row.planDynamic == '2') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'danger'
                },
                domProps: {
                  innerHTML: '停工'
                }
              })
            } else if (params.row.planDynamic == '3') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'success'
                },
                domProps: {
                  innerHTML: '复工'
                }
              })
            } else if (params.row.planDynamic == '4') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'warning'
                },
                domProps: {
                  innerHTML: '完工'
                }
              })
            }
          }
        },
        {
          prop: 'dynamicTime',
          label: '时间'
        },
        {
          prop: 'remark',
          label: '备注'
        },
        {
          label: '操作',
          render: (h, params) => {
            return h(
              'div',
              {
                calss: 'btnClass'
              },
              [
                h('el-button', {
                  props: {
                    size: 'mini'
                  },
                  domProps: {
                    innerHTML: `<span style='color:#F75E5E;'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleDelete(params.row.planId,params.row.index)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      startWork: false, // 开工
      stopWork: false, // 停工
      resumeWork: false, // 复工
      endWork: false, // 完工
    }
  },
  activated() {
    this.getDictData()
  },
  created() {
    //  日期默认当天
		let date = new Date()
		let theYear = date.getFullYear() //获取完整的年份(4位)
		let theMonth = date.getMonth() + 1 //获取当前月份(1-12,1代表1月)
		theMonth = theMonth >= 10 ? theMonth : "0" + theMonth
		let theDay = date.getDate() //获取当前日(1-31)
		theDay = theDay >= 10 ? theDay : "0" + theDay
    this.searchForm.workDate = theYear+'-'+theMonth+'-'+theDay
  },
  methods: {
    // 查询字典信息
    getDictData () {
      publicapi.getDictData('SCHEDULE').then(res => {
        this.workTimeList = res.data.data.SCHEDULE
      })
    },
    // 查询主列表
    searchData () {
      api.queryall(this.searchForm).then(res => {
        if (res.data.code != '0000') {
          return this.$message.error(res.data.msg)
        }
        this.tableData = res.data.data
        this.detailInfo = null
        this.startWork = false
        this.stopWork = false
        this.resumeWork = false
        this.endWork = false
      })
    },
    // 重置搜索框
    resetSearch () {
      this.searchForm = {
        workDate: '',
        wworkTime: '',
      }
    },
    //点击行
    handlerClick (val) {
      console.log(val)
      this.detailInfo = val
      if (this.detailInfo.status == '1') {
        this.startWork = false
        this.stopWork = true
        this.resumeWork = true
        this.endWork = true
      } else if (this.detailInfo.status == '2') {
        this.startWork = true
        this.stopWork = false
        this.resumeWork = true
        this.endWork = false
      } else if (this.detailInfo.status == '3') {
        this.startWork = true
        this.stopWork = true
        this.resumeWork = false
        this.endWork = true
      } else if (this.detailInfo.status == '4') {
        this.startWork = true
        this.stopWork = true
        this.resumeWork = true
        this.endWork = true
      }
      this.searchLabour()
      this.searchFumigation()
      this.searchMachine()
    },
    // 查询已配劳务
    searchLabour () {
      let params = {
        planId: this.detailInfo.id,
        dispatchType: '2'
      }
      api.queryById(params).then(res => {
        this.labourTableData = res.data.data
      })
    },
    // 查询已配熏蒸
    searchFumigation () {
      let params = {
        planId: this.detailInfo.id,
        dispatchType: '5'
      }
      api.queryById(params).then(res => {
        this.fumigationTableData = res.data.data
      })
    },
    // 查询已配机械
    searchMachine () {
      api.queryMechanicalDispatch(this.detailInfo.id).then(res => {
        this.machineTableData = res.data.data
      })
    },
    // 切换tab
    handleClick (val) {
      if (val == 'first') {

      } else if (val == 'second') {

      } else if (val == 'third') {

      }
    },
    // 开工等
    changetWorkStatus (val) {
      if (this.detailInfo == null) {
        return this.$message.warning('请先选择一条数据')
      }
      this.form = {
        dynamicTime: '',
        remark: '',
      }
      console.log(val)
      if (val == '开工') {
        this.title = '开工'
      } else if (val == '停工') {
        this.title = '停工'
      } else if (val == '复工') {
        this.title = '复工'
      } else if (val == '完工') {
        this.title = '完工'
      }
      
      this.dialogVisible = true
    },
    // 保存
    submitClick (val) {
      console.log(val)
      let planDynamic = ''
      if (val == '开工') {
        planDynamic = '1'
      } else if (val == '停工') {
        planDynamic = '2'
      } else if (val == '复工') {
        planDynamic = '3'
      } else if (val == '完工') {
        planDynamic = '4'
      }
      let params = {
        planId: this.detailInfo.id,
        planDynamic: planDynamic,
        dynamicTime: this.form.dynamicTime,
        remark: this.form.remark
      }
      api.updateById(params).then(res => {
        if (res.data.code != '0000') {
          return this.$message.error(res.data.msg)
        }
         this.$message.success('保存成功')
         this.searchData()
         this.dialogVisible = false
      })
    },
    // 显示详情页
    searchDetailData () {
      if (this.detailInfo == null) {
        return this.$message.warning('请选中一条数据')
      }
      // 查询详情
      this.dloading = true
      api.queryWorkPlanDynamic(this.detailInfo.id).then(res => {
        this.dloading = false
        this.detailTableData = res.data.data
      })
      this.isShow = true
    },
    // 删除状态
    handleDelete (id,index) {
      console.log(index)
      if (index != 0) {
        return this.$message.warning('只能删除最近一条')
      }
      this.$confirm('将回退到上一步状态, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.updateStatus(id).then(res => {
            if (res.data.code != '0000') {
              return this.$message.error(res.data.msg)
            }
            this.$message.success('更新成功')
            this.searchDetailData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      
    },
    // 关闭抽屉
    handleClose () {
      console.log(11213)
      this.searchData()
      this.isShow = false
    },
  }
}
</script>
<style lang="less" scoped>
@import "../../../assets/searchfrom.less";
</style>
